<style lang="less">
.led-preview{
    height: 100%;
    .led-file{
        padding: 0 15px 15px;
        background: rgba(0, 0, 0, 0.2);
        
        .hd{
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            line-height: 40px;
            color: #fff;
            .iconfont{
                font-size: 16px;
            }
        }
        .file-list{
            padding: 15px;
            overflow: auto;
        }
        .img-list{
            li{
                margin-bottom: 10px;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            img{
                display: block;
                width: 100%;
            }
            .el-loading-spinner{
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 20px;
                .circular{
                    width: 30px;
                    height: 30px;
                    vertical-align: top;
                }
                .el-loading-text{
                    display: inline;
                    font-size: 12px;
                }
            }
        }
        .name-list{
            &>li{
                margin-bottom: 5px;
            }
        }
    }
}
.video-control{
    background: rgba(0, 0, 0, 0.2);
}
</style>
<template>
    <div class="led-preview flex">
        <div class="flex-2  flex column">
            <div class="led-file flex column flex-2">
                <h3 class="hd"><i class="iconfont icon-screenshot"></i> LED截图列表</h3>
                <div class="flex-1 file-list">
                    <div class="mt-20 text-center" v-if="!activeLed">
                        请选择LED设备
                    </div>
                    <ul class="img-list" v-loading="imgLoading" element-loading-text="图片加载中" element-loading-spinner="el-icon-loading" v-else>
                        <li v-for="(item,index) in ledPicList" :key="index"><img :src="item.src" alt=""></li>
                    </ul>

                </div>
            </div>
            <div class="led-file flex column flex-1 mt-10">
                <h3 class="hd"><i class="iconfont icon-file"></i> IP音柱文件名列表</h3>
                <div class="flex-1 file-list">
                    <div class="mt-20 text-center" v-if="!activeIP">
                        请选择IP音柱
                    </div>
                    <ul class="name-list" v-else>
                        <li v-for="(item,index) in ipFileList" :key="index">{{item.musicfullinfo}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="led-monitor flex-1 ml-10" ref="monitorBlk">
            <div id="videoControl" class="video-control" :style="{width:videoWidth+'px',height: videoHeight+'px',margin:'0 auto'}"></div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'Led',
	props: {
		companyId: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		winH: {
			type: Number,
			default: 500
		}
	},
	components: {
	},
	data () {
		return {
			videoWidth:100,
            videoHeight:100,
            currentWinId:0,
            totalWin:16,
            ledPicList: [],
            ipFileList: [],
            activeLed: '',
            activeIP: '',
            imgLoading: false
		}
	},
	watch: {
        companyId () {
            this.ledPicList = []
            this.ipFileList = []
        },
        companyIds () {
            this.ledPicList = []
            this.ipFileList = []
        }
    },
	computed: {
		...mapState([
            'siteInfos'
		]),
		mainH () {
			return this.winH-200
		}
	},
	methods: {
        getData (number,type) {
            
            if(type == 'led'){
                this.getLed(number)
                this.activeLed = number
            }else if(type == 'ip'){
                this.getIP(number)
                this.activeIP = number
            }else{
                this.previewAction(number)
            }
        },
        getLed (number) {
            this.ledPicList = []
            this.imgLoading = true
            this.$post('/fireFightingIOT/LEDScreen/screenshot',{
                picwidth: 300,
                picheight: 300,
                number: number
            }).then(res=>{
                // this.ledPicList = [res.data]
                setTimeout(()=>{
                    this.imgLoading = false
                    this.ledPicList = [{src: `http://121.89.184.226/image/${number}.jpg?stamp=${+new Date()}`}]
                },6000)
            },err=>{
                this.imgLoading = false
                this.$message.error(err.msg)
            })
            
        },
        getIP (number) {
            this.ipFileList = []
            // this.$get('/fireFightingIOT/iPSound/getTaskRunInfo',{
            this.$get('/fireFightingIOT/ipbroadcast/getDevicesInfo',{
                number: number
            }).then(res=>{
                this.ipFileList = [res.data]
            },err=>{
                this.$message.error(err.msg)
            })
        },
        previewAction (number,index) {
			if(!oWebControl) return
            this.currentWinId ++
            this.currentWinId = Math.min(this.currentWinId,this.totalWin)
            this.startPreview(number,this.currentWinId)
        },
		startPreview (cameraIndexCode,winId) {
			var cameraIndexCode  = cameraIndexCode;     //获取输入的监控点编号值，必填
			var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
			var transMode = 1;                                      //传输协议：0-UDP，1-TCP
			var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
			var wndId = winId || -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

			cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
			cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

			oWebControl.JS_RequestInterface({
				funcName: "startPreview",
				argument: JSON.stringify({
					cameraIndexCode:cameraIndexCode,                //监控点编号
					streamMode: streamMode,                         //主子码流标识
					transMode: transMode,                           //传输协议
					gpuMode: gpuMode,                               //是否开启GPU硬解
					wndId:wndId                                     //可指定播放窗口
				})
			})
		},
        initControl () {
            this.initVideoWebPlugin({
                containerId:'videoControl',
                width:this.videoWidth,
                height:this.videoHeight,
                layout: '3x3'
            },()=>{
                // this.startPreview(this.number)
            })
        }
	},
	created () {
		// this.getData(1)
	},
	activated () {
		
	},
    mounted () {
        this.videoWidth = this.$refs.monitorBlk.clientWidth
        this.videoHeight = this.$refs.monitorBlk.clientHeight
        this.initControl()
    },
    destroyed () {
        if(oWebControl){
            oWebControl.JS_DestroyWnd().then(function(){ // oWebControl 为 WebControl 的对象
                // 销毁插件窗口成功
            },function(){
                // 销毁插件窗口失败
            });
        }
        
    }
}
</script>
